<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div id="main" style="height: 600px"></div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="../lib/geojson/china_geojson.js"></script>
    <script>
      // 注册地图
      echarts.registerMap('中国', { geoJSON: china_geojson })
      // 1.基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main'), null, {
        renderer: 'svg'
      })

      const data = [
        { name: '北京', value: 199 },
        { name: '天津', value: 42 },
        { name: '河北', value: 102 },
        { name: '山西', value: 81 },
        { name: '内蒙古', value: 47 },
        { name: '辽宁', value: 67 },
        { name: '吉林', value: 82 },
        { name: '黑龙江', value: 123 },
        { name: '上海', value: 24 },
        { name: '江苏', value: 92 },
        { name: '浙江', value: 114 },
        { name: '安徽', value: 109 },
        { name: '福建', value: 116 },
        { name: '江西', value: 91 },
        { name: '山东', value: 119 },
        { name: '河南', value: 137 },
        { name: '湖北', value: 116 },
        { name: '湖南', value: 114 },
        { name: '重庆', value: 91 },
        { name: '四川', value: 125 },
        { name: '贵州', value: 62 },
        { name: '云南', value: 83 },
        { name: '西藏', value: 9 },
        { name: '陕西', value: 80 },
        { name: '甘肃', value: 56 },
        { name: '青海', value: 10 },
        { name: '宁夏', value: 18 },
        { name: '新疆', value: 180 },
        { name: '广东', value: 123 },
        { name: '广西', value: 59 },
        { name: '海南', value: 14 }
      ]

      // 2.指定图表的配置项和数据
      const option = {
        tooltip: {},
        grid: {},

        // 1.视觉数据映射
        visualMap: [
          {
            type: 'continuous', // 连续型视觉映射组件 (默认)
            // type: "piecewise", // 分段型视觉映射组件
            left: '20%',
            seriesIndex: [0], // 指定取哪个系列的数据
            // 定义 在选中范围中的视觉元素
            inRange: {
              color: ['#04387b', '#467bc0'] // 映射组件和地图的颜色(一般和地图色相近)
            }
          }
        ],

        series: [
          {
            name: '中国地图',
            type: 'map',
            map: '中国',
            data,
            /* data: [
              { name: "北京", value: 199 },
              { name: "天津", value: 42 },
              // ……
            ], */
            itemStyle: {
              areaColor: '#023677',
              borderColor: '#1180c7'
            },
            emphasis: {
              itemStyle: { areaColor: '#4499d0' },
              label: { color: 'white' }
            },
            select: {
              label: { color: 'white' },
              itemStyle: { areaColor: '#4499d0' }
            }
          }
        ]
      }
      myChart.setOption(option)
    </script>
  </body>
</html>
